<template>
	<view class="invite-page">
		<u-navbar :autoBack="true" title="邀请好友" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view style="height: 285rpx;"></view>
		<view class="content">
			<view class="code-box">
				<image class="code" :src="QRimage" mode=""></image>
			</view>
			<view class="btn">
				<view class="btn-item">
					<u-button color="#817FFD" type="primary" @click="gocory" text="复制链接"></u-button>
				</view>
				<view class="btn-item">
					<u-button color="#0091FF" type="primary" @click="creatCanvas" text="保存图片"></u-button>
				</view>
			</view>
			<view class="tips">
				<image src="https://m.lqvvvv.com/assets/static/my/invite-tips.png" mode=""></image>
			</view>
		</view>
		<canvas canvas-id="myCanvas" style="opacity: 0;width: 150px;height: 150px;"></canvas>
	</view>
</template>

<script>
	import QR from "@/codes/utils/wxqrcode.js" // 二维码生成器  
	export default {
		data() {
			return {
				info: {},
				shareUrl: '',
				QRimage: ''
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			gocory() {
				const app = this
				uni.setClipboardData({
					data: app.shareUrl, // 需要复制的内容
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.error('复制失败:', err);
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			goshare() {

			},
			creatCanvas() {
				let app = this;
				uni.showLoading({
					title: '生成中...'
				});
				const ctx = uni.createCanvasContext('myCanvas', this);
				// 绘制海报的背景图
				ctx.drawImage(app.QRimage, 0, 0, 150, 150);
				// 绘制完成后，保存 Canvas 内容为图片
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							// 保存到相册
							// #ifdef APP
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: (err) => {
									uni.hideLoading();
									console.log(err);
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
							// #endif
							// #ifdef MP-WEIXIN
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: (err) => {
									uni.hideLoading();
									console.log(err);
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
							// #endif
							// #ifdef H5
							// 创建一个下载链接
							const a = document.createElement('a');
							a.href = res.tempFilePath;
							a.download = '二维码.png'; // 设置下载的文件名
							document.body.appendChild(a); // 将链接添加到文档中
							a.click(); // 触发点击下载
							document.body.removeChild(a); // 下载后移除链接

							uni.hideLoading();
							uni.showToast({
								title: "保存成功",
								icon: "none"
							});
							// #endif
						},
						fail: (err) => {
							console.error(err);
							uni.hideLoading();
							uni.showToast({
								title: "生成图片失败，请稍后重试",
								icon: "none"
							});
						}
					}, this);
				});
			},
			getuserinfo() {
				uni.showLoading({
					mask: true,
					title: '生成二维码中...'
				})
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.info = res.data
						this.shareUrl = 'https://m.lqvvvv.com/invite/#/pages/index/index?' +
							`code=${this.info.invite_code}`
						this.QRimage = QR.createQrCodeImg(this.shareUrl, {
							size: parseInt(200),
							typeNumber: 7
						})
					} else {
						this.info = {}
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.invite-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/my/invite.png');
		background-repeat: no-repeat;
		background-size: 100% 400rpx;
		padding: 30rpx;

		.content {
			padding: 0 40rpx 40rpx;
			background-color: #f0f9ff;
			border-radius: 40rpx;
			border: 4rpx solid #ffffff;

			.code-box {
				width: 100%;
				height: 500rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.code {
					width: 300rpx;
					height: 300rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.btn-item {
					width: 45%;
				}
			}

			.tips {

				padding: 40rpx 0;

				image {
					width: 100%;
					height: 405rpx;
				}
			}
		}
	}
</style>